<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/19 0019
  Time: 18:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="hotelName" value="${hotelName}"/>
<c:set var="loginCustomer" value="${loginCustomer}"/>
<head>
    <meta charset="UTF-8">
    <title>向家网</title>
    <link rel="icon" href="../images/home.ico" type="image/x-ico" />

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/commen-header.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/hotel_commen.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/hotel_detail.css">


    <script src="../js/jquery-3.4.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="../dist/css/bootstrap.css" rel="stylesheet">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link href="../dist/css/bootstrap-theme.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../dist/js/bootstrap.js"></script>



    <!--layui-->
    <link href="../layui/css/layui.css" rel="stylesheet">
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/modules/layui-icon-extend/iconfont.css">





</head>
<body>

<div class="header">
    <div class="header-logo">
        <a href="../index.jsp"><img src="../images/logo.png"></a>
        <div class="header-bar">
            <ul class="layui-nav" lay-filter="">
                <li class="layui-nav-item">
                    <a><div><span>今日活动</span></div></a>
                </li>

                <li class="layui-nav-item">
                    <a href="../customer/wishlist.jsp"><div><span>心愿单</span></div></a>
                </li>

                <li class="layui-nav-item">
                    <a><div><span>消息</span></div></a>
                </li>

                <li class="layui-nav-item">
                    <a><div><span>帮助</span></div></a>
                </li>

                <c:choose>
                    <c:when test="${!empty loginCustomer}">
                        <li class="layui-nav-item">
                            <a href=""><img id="image" src="" class="layui-nav-img">我</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">修改信息</a></dd>
                                <dd><a href="javascript:;">礼券中心</a></dd>
                                <dd><a href="javascript:;">历史足迹</a></dd>
                                <dd><a href="javascript:;" class="out-login" >退出登录</a></dd>
                            </dl>
                        </li>
                    </c:when>
                    <c:otherwise>
                        <li class="layui-nav-item">
                            <a href="../customer/register.jsp"><div><span>注册</span></div></a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="../customer/login.jsp"><div><span>登录</span></div></a>
                        </li>
                    </c:otherwise>
                </c:choose>


            </ul>

            <script>
                //注意：导航 依赖 element 模块，否则无法进行功能性操作
                layui.use('element', function(){
                    var element = layui.element;

                    //…
                });
            </script>

        </div>
    </div>
</div>

<div id="body">
    <div id="body-searchers">
        <div id="body-search1">
            <div id="mini-h2">境内外特价搜不停</div>
            <form>
                <ul>
                    <li>
                        <span class="body-search1-p">目的地/住宿名称</span>
                        <input type="text" class="body-search1-p">
                    </li>
                    <li>
                        <span class="body-search1-p">入住日期</span>
                        <input type="date" class="body-search1-p">
                    </li>
                    <li>
                        <span class="body-search1-p">退房日期</span>
                        <input type="date" class="body-search1-p">
                    </li>

                    <li><select class="body-search1-q">
                        <option>1位成人</option>
                        <option>2位成人</option>
                        <option>3位成人</option>
                        <option>4位成人</option>
                        <option>5位成人</option>
                        <option>6位成人</option>
                    </select></li>

                    <li><select class="body-search1-q">
                        <option>无儿童</option>
                        <option>1位儿童</option>
                        <option>2位儿童</option>
                        <option>3位儿童</option>
                        <option>4位儿童</option>
                        <option>5位儿童</option>
                        <option>6位儿童</option>
                    </select></li>

                    <li><select class="body-search1-q">
                        <option>1间房</option>
                        <option>2间房</option>
                        <option>3间房</option>
                        <option>4间房</option>
                        <option>5间房</option>
                        <option>6间房</option>
                    </select></li>


                    <input style="font-family: 'Adobe 宋体 Std L'" type="button" value="搜特价" id="body-search1-commit">
                </ul>
            </form>
        </div>
        <div id="body-reviews">
            <button id="write-reviews" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')">我要写点评</button>

            <div id="fade" class="black_overlay">
            </div>
            <div id="MyDiv" class="white_content">
                <div style="text-align: right; cursor: default; height: 40px;" id="move">
                    <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
                </div>

            </div>


            <div id="reviews-view">
                <h3 style="font-family: 'Adobe 黑体 Std R'">看看住客最喜欢什么:</h3>
                <ul>
                    <li class="reviews-view-li">
                        <p style="font-family: 'Adobe 宋体 Std L'">“位置不用多说了很好很方便，酒店自身闹中取静，装修风格古典又时尚，有很多细节可以看。几栋楼围合的庭院虽然不大但景致不错，入住的几天都会在早晚散步，逗逗院中孔雀。总体评价不错，会再入住。</p>
                        <div class="review-customer">
                            <img class="review-customer-pic" src="../images/review-pic.png">
                            <div class="review-customer-name"><b>阿伟</b></div><br>
                            <div class="review-customer-city">苏州</div>
                        </div>
                    </li>
                    <li class="reviews-view-li">
                        <p style="font-family: 'Adobe 宋体 Std L'">“位置不用多说了很好很方便，酒店自身闹中取静，装修风格古典又时尚，有很多细节可以看。几栋楼围合的庭院虽然不大但景致不错，入住的几天都会在早晚散步，逗逗院中孔雀。总体评价不错，会再入住。</p>
                        <div class="review-customer">
                            <img class="review-customer-pic" src="../images/review-pic.png">
                            <div class="review-customer-name"><b>阿伟</b></div><br>
                            <div class="review-customer-city">苏州</div>
                        </div>
                    </li>
                    <li class="reviews-view-li">
                        <p style="font-family: 'Adobe 宋体 Std L'">“位置不用多说了很好很方便，酒店自身闹中取静，装修风格古典又时尚，有很多细节可以看。几栋楼围合的庭院虽然不大但景致不错，入住的几天都会在早晚散步，逗逗院中孔雀。总体评价不错，会再入住。</p>
                        <div class="review-customer">
                            <img class="review-customer-pic" src="../images/review-pic.png">
                            <div class="review-customer-name"><b>阿伟</b></div><br>
                            <div class="review-customer-city">苏州</div>
                        </div>
                    </li>
                    <li class="reviews-view-li">
                        <p style="font-family: 'Adobe 宋体 Std L'">“位置不用多说了很好很方便，酒店自身闹中取静，装修风格古典又时尚，有很多细节可以看。几栋楼围合的庭院虽然不大但景致不错，入住的几天都会在早晚散步，逗逗院中孔雀。总体评价不错，会再入住。</p>
                        <div class="review-customer">
                            <img class="review-customer-pic" src="../images/review-pic.png">
                            <div class="review-customer-name"><b>阿伟</b></div><br>
                            <div class="review-customer-city">苏州</div>
                        </div>
                    </li>
                    <li class="reviews-view-li">
                        <p style="font-family: 'Adobe 宋体 Std L'">“位置不用多说了很好很方便，酒店自身闹中取静，装修风格古典又时尚，有很多细节可以看。几栋楼围合的庭院虽然不大但景致不错，入住的几天都会在早晚散步，逗逗院中孔雀。总体评价不错，会再入住。</p>
                        <div class="review-customer">
                            <img class="review-customer-pic" src="../images/review-pic.png">
                            <div class="review-customer-name"><b>阿伟</b></div><br>
                            <div class="review-customer-city">苏州</div>
                        </div>
                    </li>
                    <li class="reviews-view-li">
                        <p style="font-family: 'Adobe 宋体 Std L'">“位置不用多说了很好很方便，酒店自身闹中取静，装修风格古典又时尚，有很多细节可以看。几栋楼围合的庭院虽然不大但景致不错，入住的几天都会在早晚散步，逗逗院中孔雀。总体评价不错，会再入住。</p>
                        <div class="review-customer">
                            <img class="review-customer-pic" src="../images/review-pic.png">
                            <div class="review-customer-name"><b>阿伟</b></div><br>
                            <div class="review-customer-city">苏州</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="container" style="width: 100%">
                <nav aria-label="Page navigation">
                    <ul class="pager">
                        <li><a href="#">上一页</a></li>
                        <li><a href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div id="body-contains">
        <div class="hotil-header">

        </div>
        <div class="lunbo">
            <div class="container" style="width: 100%;height: 460px">
                <div class="row clearfix">
                    <div class="carousel slide" id="carousel-304852">
                        <ol class="carousel-indicators">
                            <li data-slide-to="0" data-target="#carousel-304852">
                            </li>
                            <li data-slide-to="1" data-target="#carousel-304852">
                            </li>
                            <li data-slide-to="2" data-target="#carousel-304852">
                            </li>
                            <li data-slide-to="3" data-target="#carousel-304852">
                            </li>
                            <li data-slide-to="4" data-target="#carousel-304852">
                            </li>

                        </ol>
                        <div class="carousel-inner" >
                            <div class="item">
                                <img alt="" src="../images/hotil_image1.jpg" style="width: 100%;height: 460px" />
                            </div>
                            <div class="item">
                                <img alt="" src="../images/hotil_image2.jpg" style="width: 100%;height: 460px"/>
                            </div>
                            <div class="item">
                                <img alt="" src="../images/hotil_image3.jpg" style="width: 100%;height: 460px"/>
                            </div>
                            <div class="item">
                                <img alt="" src="../images/hotil_image4.jpg" style="width: 100%;height: 460px"/>
                            </div>
                            <div class="item active">
                                <img alt="" src="../images/hotil_image5.jpg" style="width: 100%;height: 460px"/>
                            </div>
                        </div> <a class="left carousel-control" href="#carousel-304852" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-304852" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="hotil-detial">
            <div class="hotil-detial-particular">

            </div>
            <span class="hot-facility">
                <p class="hot-facility-header">热门设施/服务</p>
                <span>
                    <img src="../images/游泳.svg">1个游泳池
                    <img src="../images/禁烟.svg">禁烟客房
                    <img src="../images/健身.svg">健身中心
                    <img src="../images/免费停车.svg">免费停车
                </span><br>
                 <span>
                    <img src="../images/餐厅.svg">餐厅
                    <img src="../images/无障碍设施.svg">无障碍设施
                    <img src="../images/早餐.svg">早餐
                    <img src="../images/咖啡.svg">所有客房均提供沏茶/咖啡设备
                </span><br>
                <span class="hotil-score" style="color: #3e8f3e"> </span>
            </span>

            <div style="margin-top: 10px;height: 30px;width: 100%;border: #3e8f3e 1px solid">
                <span style="margin-left:20px "><img src="../images/信用卡.svg">
                    <span style="margin-left:20px">预订无需信用卡。我们将向你发送订单确认邮件。</span></span>
            </div>

            <div style="margin-top: 10px;height: 30px;width: 100%;border: #3e8f3e 1px solid">
                <span style="margin-left:20px "><img src="../images/订单-待出行.svg">
                    <span style="margin-left:20px">选择可免费取消的房型出行更灵活哦，在指定期限前修改或取消订单都没问题！</span></span>
            </div>

        </div>
        <div class="order-detail">
            <div class="order-detail-header">
                <div class="order-detail-header-c">客房类型</div>
                <div class="order-detail-header-c">可住</div>
                <div class="order-detail-header-c">今日价格</div>
                <div class="order-detail-header-c">预订须知</div>
                <div class="order-detail-header-c">选择客房</div>
            </div>
            <ul class="order-detail-ul">


            </ul>

            <button class="order-submit">提交</button>
        </div>

    </div>

</div>
<script type="text/javascript">
    var hotelName = "${hotelName}"
    var loginCustomer = "${loginCustomer}"
</script>
<script src="../js/hotail_detail.js"></script>
</body>
</html>
